import React from 'react';

var log = console.log.bind(console)
import stroage from  './stroage'

class TodoList extends React.Component {
  constructor(props) {
    super(props);
  }


  render() {
    log('debug React.Children', React.Children)
    let lists = this.props.data.map((n, i) => {
      let completed = n.completed ? 'completed' : null
      return <li className={completed} key={i}>
        <div className="view">
          <input className="toggle" type="checkbox"

                 onChange={()=>this.editHandle('complete', n.id)}/>
          <label>{n.name}</label>
          <button className="destroy"
                  onClick={() => this.editHandle('delete', n.id)}/>
        </div>
        <input className="edit"/>
      </li>
    })
    return (
      <section className="main">
        <input className="toggle-all" type="checkbox" checked=""/>
        <ul className="todo-list">
          {lists}
        </ul>
      </section>
    )
  }

  editHandle(action, id) {
    log('debug action, id', action, id)
    this.props.editHandle(action, id)

    // this.setState({
    //   list: this.props.data.filter((n, i) => i !== index)
    // })
  }

}

// TodoList.propTypes = {
//   data: React.PropTypes.array.isRequired
// }

export default TodoList
